<template>
  <div class="yuyue">
    <div class="yycg">
      <h3>√ 预约成功，待就诊</h3>
      <p>就诊地址：{{ item.city }}</p>
    </div>
    <div class="jzxx">
      <h3>就诊信息</h3>
      <p><span>就诊时间：</span>{{ item.data }} 上午</p>
      <p><span>就诊地点：</span>{{ item.city }}</p>
      <p><span>就诊科室：</span>{{ item.keshi }}</p>
      <p><span>医生姓名：</span>{{ item.name }}</p>
      <p><span>医生职称：</span>{{ item.doctorstate }}</p>
      <p><span>出诊类型：</span>普通门诊</p>
      <p><span>挂号费用：</span>{{ feiy }}</p>
      <p><span>挂号单号：</span>{{ item.value2 }}</p>
      <p><span>挂号时间：</span>{{ item.currentTime1 }}</p>
      <p><span> 就 诊 人 ：</span>{{ item.value1 }}</p>
      <p><span>身份证号：</span>********</p>
    </div>
    <div class="xz">
      <h3>预约须知</h3>
      <p>先预约挂号，后到院就诊</p>
    </div>
    <div class="footer">
      <van-button
        plain
        type="success"
        style="
          float: left;
          margin-left: 20%;
          margin-top: 0.3rem;
          border-radius: 0.5rem;
        "
        @click="quxiaoyy"
        >取消预约</van-button
      >
      <van-button
        type="default"
        style="
          float: right;
          margin-right: 20%;
          margin-top: 0.3rem;
          border-radius: 0.5rem;
        "
        @click="huishouy"
        >回首页</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const feiy = '￥60元(到院付款)'
const route = useRoute()
const router = useRouter()
const item = route.query
const yqx = '已取消'
const ygh = '已挂号'
let sj = []

import { showConfirmDialog } from 'vant';
// 点击取消预约
const quxiaoyy = () => {
     showConfirmDialog({
  title: '标题',
  message:
    '确定要取消本次预约吗',
})
  .then((res) => {
  localStorage.getItem('item')
  if (localStorage.getItem('item')) {
    sj = JSON.parse(localStorage.getItem('item') as string)
    if (sj && sj.push) {
      sj.push({
        keshi: item.keshi,
        data: item.data,
        name2: item.value1,
        name1: item.name,
        doctorstate: item.doctorstate,
        doctorimage: item.doctorimage,
        yqx: yqx,
        feiy: feiy,
      })
      localStorage.setItem('item', JSON.stringify(sj))
    }
  } else {
    sj = [
      {
        keshi: item.keshi,
        data: item.data,
        name2: item.value1,
        name1: item.name,
        doctorstate: item.doctorstate,
        doctorimage: item.doctorimage,
        yqx: yqx,
        feiy: feiy,
      },
    ]
    localStorage.setItem('item', JSON.stringify(sj))
  }
  console.log(sj)
     router.push('/xiao/wdgh')
  })
  .catch(() => {
    // on cancel
  });
    
}
// 点击回首页
const huishouy = () => {
  localStorage.getItem('item')
  if (localStorage.getItem('item')) {
    sj = JSON.parse(localStorage.getItem('item') as string)
    if (sj && sj.push) {
      sj.push({
        keshi: item.keshi,
        data: item.data,
        name2: item.value1,
        name1: item.name,
        doctorstate: item.doctorstate,
        doctorimage: item.doctorimage,
        yqx: ygh,
        feiy: feiy,
      })
      localStorage.setItem('item', JSON.stringify(sj))
    }
  } else {
    sj = [
      {
        keshi: item.keshi,
        data: item.data,
        name2: item.value1,
        name1: item.name,
        doctorstate: item.doctorstate,
        doctorimage: item.doctorimage,
        yqx: ygh,
        feiy: feiy,
      },
    ]
    localStorage.setItem('item', JSON.stringify(sj))
  }
  router.push('/xiao/yuyue')
}
</script>

<style lang="scss">
.yuyue {
  width: 100vw;
  height: 100vh;
  font-size: 0.5rem;
  background: linear-gradient(
    rgb(47, 159, 107),
    rgb(181, 248, 222),
    rgb(226, 226, 226),
    rgb(233, 233, 232),
    rgb(233, 233, 232)
  );
}
.yycg {
  padding: 0.3rem;
  color: #fff;
  h3 {
    width: 100%;
    height: 0.6rem;
    margin: 0;
    font-size: 0.4rem;
  }
  p {
    margin: 0;
    font-size: 0.25rem;
    margin-left: 0.5rem;
  }
}
.jzxx {
  span {
    font-size: 0.27rem;
  }
  font-size: 0.28rem;
  width: 86%;
  height: 8rem;
  margin-left: 5%;
  background-color: #fff;
  padding-left: 0.3rem;
  border-radius: 0.2rem;
}
.xz {
  width: 86%;
  height: 2rem;
  margin-left: 5%;
  padding-left: 0.3rem;
  border-radius: 0.2rem;
  margin-top: 0.2rem;
  background: linear-gradient(rgb(124, 233, 193), rgb(232, 228, 229));
  h3 {
    margin: 0;
    padding-top: 0.2rem;
    font-size: 0.3rem;
  }
  p {
    font-size: 0.3rem;
    margin: 0.2rem;
  }
}
.footer {
  width: 100%;
  height: 2rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
}
</style>
